<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>22-综合案例</title>
    <!--导入vue资源文件-->
    <script src="../js/vue.js"></script>
    <!--导入ElementUI相关资源-->
    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
    <script src="../element-ui/lib/index.js"></script>
</head>
<body>
<!--1. 准备一个容器-->
<div id="app">
    <!--编辑用户的弹窗-->
    <el-dialog :visible.sync="flag2" title="编辑用户"  @close="closeFormReset">
        <el-form
                v-bind:model="editUserData"
                v-bind:rules="ruleReg"
                ref="editFrm"
        >
            <el-form-item label="用户名" label-width="70px" prop="username">
                <el-input name="username" placeholder="请输入用户名" prefix-icon="el-icon-user" v-model="editUserData.username"></el-input>
            </el-form-item>
            <el-form-item label="性别" label-width="70px" prop="sex">
                <el-radio-group v-model="editUserData.sex">
                    <el-radio label="1">男</el-radio>
                    <el-radio label="0">女</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="生日" label-width="70px" prop="birthday">
                <el-date-picker name="birthday" v-model="editUserData.birthday" type="datetime"></el-date-picker>
            </el-form-item>
            <el-form-item label="手机号" label-width="70px"  prop="tel">
                <el-input name="tel" placeholder="请输入手机号"  prefix-icon="el-icon-mobile-phone" v-model="editUserData.tel"></el-input>
            </el-form-item>
            <el-form-item label="职业" label-width="70px"  prop="profession">
                <el-select name="profession" v-model="editUserData.profession">
                    <el-option label="攻城狮" value="1"></el-option>
                    <el-option label="程序猿" value="2"></el-option>
                    <el-option label="码农" value="3"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="薪资" label-width="70px"  prop="sal">
                <el-input name="sal" placeholder="请输入薪资" prefix-icon="el-icon-money" v-model="editUserData.sal"></el-input>
            </el-form-item>
            <el-form-item label="地址" label-width="70px"  prop="address">
                <el-input name="address" placeholder="请输入地址"  prefix-icon="el-icon-location" v-model="editUserData.address"></el-input>
            </el-form-item>
            <el-form-item label="备注" label-width="70px" prop="remark">
                <el-input name="remark" placeholder="请输入备注"  prefix-icon="el-icon-more" v-model="editUserData.remark"></el-input>
            </el-form-item>
            <el-form-item label="操作" label-width="70px">
                <div>
                    <div>
                        <el-button type="success" icon="el-icon-check" @click="editSubmitForm">提交</el-button>
                        <el-button type="warning"  icon="el-icon-close" @click="resetEditWin">重置</el-button>
                    </div>
                </div>
            </el-form-item>
        </el-form>
    </el-dialog>
    <!--添加用户的弹窗-->
    <el-dialog :visible.sync="flag1" title="添加用户"  @close="closeFormReset">
        <el-form
                v-bind:model="addUserData"
                v-bind:rules="ruleReg"
                ref="frm"
        >
            <el-form-item label="用户名" label-width="70px" prop="username">
                <el-input name="username" placeholder="请输入用户名" prefix-icon="el-icon-user" v-model="addUserData.username"></el-input>
            </el-form-item>
            <el-form-item label="性别" label-width="70px" prop="sex">
                <el-radio-group v-model="addUserData.sex">
                    <el-radio label="1">男</el-radio>
                    <el-radio label="0">女</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="生日" label-width="70px" prop="birthday">
                <el-date-picker name="birthday" v-model="addUserData.birthday" type="datetime"></el-date-picker>
            </el-form-item>
            <el-form-item label="手机号" label-width="70px"  prop="tel">
                <el-input name="tel" placeholder="请输入手机号"  prefix-icon="el-icon-mobile-phone" v-model="addUserData.tel"></el-input>
            </el-form-item>
            <el-form-item label="职业" label-width="70px"  prop="profession">
                <el-select name="profession" v-model="addUserData.profession">
                    <el-option label="攻城狮" value="1"></el-option>
                    <el-option label="程序猿" value="2"></el-option>
                    <el-option label="码农" value="3"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="薪资" label-width="70px"  prop="sal">
                <el-input name="sal" placeholder="请输入薪资" prefix-icon="el-icon-money" v-model="addUserData.sal"></el-input>
            </el-form-item>
            <el-form-item label="地址" label-width="70px"  prop="address">
                <el-input name="address" placeholder="请输入地址"  prefix-icon="el-icon-location" v-model="addUserData.address"></el-input>
            </el-form-item>
            <el-form-item label="备注" label-width="70px" prop="remark">
                <el-input name="remark" placeholder="请输入备注"  prefix-icon="el-icon-more" v-model="addUserData.remark"></el-input>
            </el-form-item>
            <el-form-item remark>
                <el-button type="success" icon="el-icon-check" @click="submitFun">提交</el-button>
                <el-button type="warning"  icon="el-icon-close" @click="resetFun">重置</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

    <!--表头操作行-->
    <el-row type="flex" justify="start">
        <el-col :span="4">
            <el-button type="primary" icon="el-icon-plus" @click="flag1 = !flag1">添加</el-button>
            <el-button type="danger" icon="el-icon-delete" @click="deleteIds">批量删除</el-button>
        </el-col>
        <el-col :span="6">
            <el-input name="keyWords" v-model="keyWords" placeholder="请输入搜索关键词：">
                <el-select name="searchType" v-model="searchType" slot="prepend">
                    <el-option label="编号" value="1"></el-option>
                    <el-option label="姓名" value="2"></el-option>
                    <el-option label="地址" value="3"></el-option>
                </el-select>
                <el-button icon="el-icon-search" type="info" slot="append" @click="searchRow">搜索</el-button>
            </el-input>
        </el-col>
    </el-row>
    <br>
    <br>
    <!--表格数据-->
    <el-table
            border
            v-bind:data="userList"
            @select-all="selectAll"
            @select="selectOne"
    >
        <el-table-column  align="center"type="selection"></el-table-column>
        <el-table-column label="序号" align="center"type="index"></el-table-column>
        <el-table-column label="主键" align="center" prop="id"></el-table-column>
        <el-table-column label="姓名" align="center" prop="username"></el-table-column>
        <el-table-column label="性别" align="center" prop="sex" :formatter="fun1"></el-table-column>
        <el-table-column label="生日" align="center" prop="birthday"></el-table-column>
        <el-table-column label="手机" align="center" prop="tel"></el-table-column>
        <el-table-column label="职业" align="center" prop="profession" :formatter="fun2"></el-table-column>
        <el-table-column label="薪资" align="center" prop="sal"></el-table-column>
        <el-table-column label="地址" align="center" prop="address"></el-table-column>
        <el-table-column label="备注" align="center" prop="remark"></el-table-column>
        <el-table-column label="操作" align="center">
            <div slot-scope="scope">
                <div>
                    <el-button icon="el-icon-delete" type="danger" size="small" @click="deleteRow(scope)">删除</el-button>
                    <el-button icon="el-icon-edit" type="warning" size="small" @click="editUser(scope.row)">编辑</el-button>
                </div>
            </div>
        </el-table-column>
    </el-table>
    <br>
    <!--分页组件-->
    <el-pagination
            v-bind:total="pageInfo.total"
            v-bind:page-size="pageInfo.pageSize"
            v-bind:current-page="pageInfo.pageNum"
            v-bind:page-sizes="pageInfo.pageSizes"
            layout="total,prev,pager,next,jumper,sizes"
    >
    </el-pagination>

</div>
<script src="../js/表格+表单+弹窗+按钮综合案例.js"></script>
</body>
</html>